<template>
  <div class="h-table">
    <div class="table-header table-row">
      <div
        class="table-cell"
        :style="`width: calc(100% / ${option.length})`"
        v-for="(item, index) in option"
        :key="index"
      >
        {{ item.label }}
      </div>
    </div>
    <div class="table-body" v-if="getPlayData.length > 0">
      <div
        :class="{ 'scroll-wrap': getPlayData.length > 0 }"
        :style="`animation-duration: ${second}s`"
      >
        <div
          class="table-row"
          :class="{ hasBgc: index % 2 === 0 }"
          v-for="(item, index) in getPlayData"
          :key="index"
          :ref="'row_' + index"
        >
          <div
            class="table-cell"
            :style="`width: calc(100% / ${option.length})`"
            :title="item.productName"
            v-for="(t, i) in option"
            :key="i"
          >
            <span v-if="t.type === 'dict'">{{ getDictLabel(t, item) }}</span>
            <span v-else-if="t.type === 'format'">{{ t.format(item) }}</span>
            <span v-else>{{ item[t.prop] }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="no-data" v-else>暂无数据</div>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => {
        return [];
      },
    },
    option: {
      type: Array,
      default: () => [],
    },
    dict: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    getPlayData() {
      return this.data;
    },
    // 列表滚动时间的计算
    second() {
      // 当数据的高度少于表体的高度时，不动
      // 当数据的高度大于表体的高度
      // 计算滚动部分为数据的高度减去标题的高度
      return 2.25 * 12;
    },
  },
  data() {
    return {
      initMt: 0,
      visible: true,
      stop: false,
    };
  },
  methods: {
    getDictLabel(option, data) {
      const dict = this.dict[option.prop];
      const row = dict.find((m) => m.value == data[option.prop]) || {
        label: "-",
      };
      return row.label;
    },
    play() {
      setTimeout(() => {
        this.visible = false;
        this.$nextTick(() => {
          this.initMt++;
          if (this.initMt === this.data.length) {
            this.initMt = 0;
          }
          this.visible = true;
        });
        this.play();
      }, 2000);
    },
  },
};
</script>
<style lang="scss" scoped>
$cellHeight: 35px;
.h-table {
  cursor: default;
  padding: 10px 0;
  .table-row {
    display: flex;
    line-height: 35px;
    height: 35px;
    transition: all 0.3s;
  }
  .table-header {
    background-color: #f5f7fa;
    border: 1px solid #ebeef5;
    line-height: 30px;
    height: 30px;
  }
  .table-cell {
    text-align: left;
    font-size: 14px;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: center;
  }
  .table-body {
    height: calc(100% - 35px);
    overflow-y: hidden;
    .table-row {
      color: #666;
    }
    .hasBgc {
      background: #fafafa;
    }
  }
  .no-data {
    height: 100px;
    line-height: 100px;
    text-align: center;
    font-size: 14px;
    color: #999;
  }
}
.hidden-row {
  height: 0 !important;
  line-height: 0 !important;
  display: none !important;
}
.scroll-wrap {
  position: relative;
  // animation: scroll 18s linear infinite;
  animation-name: scroll;
  animation-timing-function: linear;
  animation-delay: infinite;
}
.scroll-wrap:hover {
  animation-play-state: paused;
}
@keyframes scroll {
  from {
    top: 0;
  }
  to {
    top: -12 * $cellHeight;
  }
}
</style>
